<template>
  <div class="home">
    <div v-for="item in categoryList" :key="item.id">
      <p>{{ item.name }}</p>
      <ul>
        <li v-for="item1 in item.goodsList" :key="item1.id" @click="quxiang(item1.id)">
          <img :src="item1.list_pic_url" alt="" />
          <p>{{ item1.name }}</p>
          <h5>{{ item1.retail_price }}</h5>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  props: { categoryList: [] },
  data() {
    return {};
  },
  methods: {
    quxiang(id) {
      this.$router.push({
        name: "xiang",
        query: { id },
      });
    }
  }
};
</script>
<style lang="less" scoped>
.home {
  width: 100%;

  div {
    width: 100%;
    margin: 0 auto;

    p {
      text-align: center;
    }

    ul {
      width: 100%;
      height: 900px;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-top: 30px;

      li {
        width: 50%;
        position: relative;

        img {
          width: 100%;
          height: 100%;
        }

        p {
          position: absolute;
          bottom: 10%;
          left: 10%;
          text-align: center;
          font-size: 14px;
        }

        h5 {
          position: absolute;
          bottom: 4%;
          left: 45%;
          color: yellow;
          text-align: center;
          font-size: 14px;
        }
      }
    }
  }
}
</style>